<template>
  <view class="page">
    <image class="poster" mode="widthFix" :src="posterImage"></image>
    <!--		音频播放控制器-->
    <view class="audio-control-bar">
      <!--			进度条-->
      <view class="process-bar">
        <view class="content" :style="{ width: (audioDuration.current / audioDuration.total) * 100 + '%' }"></view>
      </view>
      <!--			时间-->
      <view class="duration" v-if="audioDuration.total > 0">
        <text class="current-time">{{ formatCurrentTime }}</text>
        <text style="margin: 0 10rpx">/</text>
        <text class="total-time">{{ formatTotalTime }}</text>
      </view>
      <!--			控制按钮-->
      <view class="control-btn">
        <!--				倍速按钮-->
        <view class="btn" @click="$refs.popupPicker.open()">
          <image class="icon" mode="heightFix" :src="playRateIcon"></image>
          <view class="text">{{ `倍速：${playbackRate}` }}</view>
        </view>
        <!--				播放按钮-->
        <view class="btn" v-if="pause" @click="playAudio">
          <image class="icon" :src="playIcon" mode="heightFix"></image>
          <view class="text">播放</view>
        </view>
        <!--				暂停按钮-->
        <view class="btn" v-else @click="pauseAudio">
          <image class="icon" :src="pauseIcon" mode="heightFix"></image>
          <view class="text">暂停</view>
        </view>
        <!--				循环按钮-->
        <view class="btn" v-if="playMode === 'cycle'" @click="playMode = 'noCycle'">
          <image class="icon" :src="cycleIcon" mode="heightFix"></image>
          <view class="text">自动循环</view>
        </view>
        <!--				不循环按钮-->
        <view class="btn" v-else @click="playMode = 'cycle'">
          <image class="icon" :src="noCycleIcon" mode="heightFix"></image>
          <view class="text">单次播放</view>
        </view>
      </view>
    </view>

    <popupPicker
      ref="popupPicker"
      v-model="playbackRate"
      @change="setAudioPlaybackRate"
      :picker-option-list="[
        {
          value: 0.5,
          label: '0.5倍速',
        },
        {
          value: 0.75,
          label: '0.75倍速',
        },
        {
          value: 1,
          label: '1倍速',
        },
        {
          value: 1.25,
          label: '1.25倍速',
        },
        {
          value: 1.5,
          label: '1.5倍速',
        },
        {
          value: 2,
          label: '2倍速',
        },
      ]"
    ></popupPicker>
  </view>
</template>

<script>
import { getShowNginxPicUrl } from "@/utils/settings"
import dateUtils from "@/utils/dateUtils"
import numberUtils from "@/utils/numberUtils"
import cycleIcon from "./assets/cycle.png"
import pauseIcon from "./assets/pause.svg"
import playIcon from "./assets/play.png"
import playRateIcon from "./assets/playrate.svg"
import popupPicker from "@/components/popupPicker/index.vue"
import { getShowImage } from "@/utils"
import noCycleIcon from "./assets/noCycle.png"

let innerAudioContext
export default {
  components: { popupPicker },
  methods: {
    getShowNginxPicUrl,
    // 播放音频
    playAudio() {
      this.pause = false
      innerAudioContext.play()
    },
    // 暂停音频
    pauseAudio() {
      this.pause = true
      innerAudioContext.pause()
    },
    // 设置音频倍速
    setAudioPlaybackRate() {
      innerAudioContext.playbackRate = this.playbackRate
    },
  },
  computed: {
    // 格式化时间
    formatCurrentTime() {
      const obj = dateUtils.formatTimeObject(this.audioDuration.current)
      return `${numberUtils.padZero(obj.m)}:${numberUtils.padZero(obj.s)}`
    },
    formatTotalTime() {
      const obj = dateUtils.formatTimeObject(this.audioDuration.total)
      return `${numberUtils.padZero(obj.m)}:${numberUtils.padZero(obj.s)}`
    },
  },
  data() {
    return {
      // 音频播放进度，单位秒
      audioDuration: {
        current: 0,
        total: 0,
      },
      pause: true,
      // 音频倍速
      playbackRate: 1,
      cycleIcon,
      pauseIcon,
      playIcon,
      playRateIcon,
      noCycleIcon,
      posterImage: "",
      playMode: "cycle", // cycle 循环播放；noCycle 不循环播放
    }
  },
  onLoad(query) {
    this.posterImage = getShowImage(decodeURIComponent(query.posterImage))
    innerAudioContext = uni.createInnerAudioContext()
    innerAudioContext.playbackRate = 1.0
    innerAudioContext.src = getShowImage(decodeURIComponent(query.audioUrl))
    innerAudioContext.onTimeUpdate(() => {
      this.audioDuration.current = innerAudioContext.currentTime
      this.audioDuration.total = innerAudioContext.duration
    })
    // 播放失败时异常处理
    innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
    // 播放时触发
    // innerAudioContext.onPlay(() => {
    // 	// innerAudioContext 里面的倍速和组件内的不匹配时设置倍速
    // 	if (innerAudioContext.playbackRate !== this.playbackRate) {
    // 		this.setAudioPlaybackRate()
    // 	}
    // })
    // 音频结束播放
    innerAudioContext.onEnded(() => {
      this.pause = true
      this.audioDuration.current = 0
      // 自动循环播放
      if (this.playMode === "cycle") {
				this.playAudio()
      }
    })
    // 获取音频的总时长
    innerAudioContext.onCanplay(() => {
      this.audioDuration.total = innerAudioContext.duration
    })
  },
  // 页面隐藏时自动暂停播放
  onHide() {
    this.pauseAudio()
  },
  // 页面卸载时销毁音频对象
  onUnload() {
    innerAudioContext.destroy()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 20vh;
  > .poster {
    width: 100%;
  }
  > .audio-control-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background: white;
    > .process-bar {
      height: 14rpx;
      background-color: #f5f5f5;
      position: relative;
      > .content {
        position: absolute;
        left: 0;
        top: 0;
        background: var(--theme-color);
        height: 100%;
      }
    }
    > .duration {
      margin-top: 10rpx;
      font-size: 30rpx;
      margin-left: 20rpx;
    }
    > .control-btn {
      display: flex;
      justify-content: space-between;
      > .btn {
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;
        > .icon {
          max-width: 46rpx;
          height: 46rpx;
        }
        > .text {
          margin-top: 6rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
